<template>
    <a-table :loading="loading" :columns="cols" :pagination="page" :dataSource="list" :rowKey="record => record.id" bordered>
        <span slot="action" slot-scope="text, record">
            <a @click="handleUpdate(record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="handleDelete(record)">删除</a>
        </span>
    </a-table>
</template>

<script>
import { openNotification } from '@/utils/util';
import { page, deleteBatch } from '@/api/formext';
export default {
    name: 'FormExtTable',
    data() {
        return {
            loading: true,
            query: {
                current: 1,
                size: 10
            },
            page: {
                total: 0,
                defaultPageSize: 10,
                showSizeChanger: true,
                pageSizeOptions: ['5', '10', '15', '20'],
                onChange: current => {
                    this.handleCurrentChange(current);
                },
                onShowSizeChange: (current, pageSize) => {
                    this.handleSizeChange(current, pageSize);
                }
            },
            // 表头
            cols: [
                {
                    title: '序号',
                    width: '80px',
                    align: 'center',
                    customRender: (text, record, index) => `${index + 1}`
                },
                {
                    title: '表单ID',
                    dataIndex: 'formId'
                },
                {
                    title: '字段名',
                    dataIndex: 'name'
                },
                {
                    title: '字段类型',
                    dataIndex: 'type'
                },
                {
                    title: '字段注释',
                    dataIndex: 'comment'
                },
                {
                    title: '操作',
                    width: '150px',
                    dataIndex: 'action',
                    scopedSlots: { customRender: 'action' }
                }
            ],
            list: []
        };
    },
    mounted() {
        this.handleLoadData();
    },
    methods: {
        async handleLoadData(query) {
            this.loading = true;
            this.query = Object.assign(this.query, query);
            let res = await page(this.query);
            if (!+res.state) {
                this.list = res.data.records;
                this.page.total = res.data.total;
            }
            this.loading = false;
        },
        handleCurrentChange(current) {
            this.query.current = current;
            this.handleLoadData();
        },
        handleSizeChange(current, pageSize) {
            this.query.current = 1;
            this.query.size = pageSize;
            this.handleLoadData();
        },
        handleUpdate(row) {
            this.$emit('update', row);
        },
        handleDelete(row) {
            const _this = this;
            this.$confirm({
                title: '操作确认',
                content: `您确定删除【${row.name}】这个字段吗？`,
                okText: '确定',
                okType: 'danger',
                cancelText: '取消',
                centered: true,
                async onOk() {
                    const res = await deleteBatch(row.id);
                    openNotification('success', '处理成功');
                    _this.handleLoadData();
                }
            });
        }
    }
};
</script>
